﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <link href="/skins/css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <link type="text/css" rel="stylesheet" href="/skins/js/layer/mobile/need/layer.css" />
    <link type="text/css" rel="stylesheet" href="/skins/css/lgform.css" />
    <link type="text/css" rel="stylesheet" href="/skins/css/style.css" />
    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
    <script src="/skins/js/vue.3.2.js"></script>
    <script src="/skins/js/layer/layer.js"></script>
    <script src="/skins/js/lg.form.js"></script>
    <script src="/skins/js/lg.base.js"></script>
</head>
<body>
    <div class="wrap">

        <div class="lg-form">

            <div class="title">课程调查</div>

            <div class="lg-form-control">
                <select id="classSelect" class="lg-select" v-on:change="OnGradeChange" v-model="form.Grade">
                    <option value="">====选择班级====</option>
                    <option v-for="item in GradeList" :value="item">{{item}}</option>
                </select>
            </div>
            <div class="lg-form-control">
                <select id="studentSelect" class="lg-select" v-on:change="OnStudentChange" v-model="form.StudentName">
                    <option value="">====选择学生====</option>
                    <option v-for="item in StudentList" :value="item.StudentName">{{item.StudentName}}</option>
                </select>
            </div>

            <div class="course-list">
                <div class="item item-title">
                    <p>课程名称</p>
                    <span>操作</span>
                </div>
                <div class="item" v-for="(item,index) in dataSource">
                    <p>{{item.ClassName}}</p>
                    <span class="lg-btn" v-if="!item.XValue" v-on:click="OnEvaluate(index)">评分</span>
                    <span v-if="item.XValue">已完成</span>
                </div>
            </div>

            <div class="lg-form-control hide">
                <input type="text" class="lg-input" />
            </div>

            <div style="text-align: center;margin-top: 1px;" v-if="!isDone">
                <span class="lg-btn lg-big lg-submit" v-on:click="Submit">保存</span>
            </div>
            
            <div class="lg-form-item" v-on:click="OnSelect">
                <div class="lg-form-title"><span class="cn"></span><span class="en"></span></div>
                <div class="lg-form-tips"></div>
                <input type="file" id="fileUp" class="hide" multiple="" ref="fileSelector" v-on:change="OnSelected">
                <div class="fileUpBox"><span class="fa fa-cloud-upload btn-file">上传</span></div>
                <div class="lg-ver"></div>
            </div>
           
        </div>

        <div class="popup" v-if="popupshow">
            <div class="operate-area">
                <div class="close" v-on:click="OnClosePanel">
                    <p></p>
                    <p></p>
                </div>
                <div class="tips">
                    <div class="item">
                        <p><strong>Challenging / Not challenging enough</strong></p>
                        <p>1. Language</p>
                        <p>2. Pace and delivery of the lesson</p>
                        <p>3. Accessibility of content</p>
                        <p>4. Level of assessments</p>
                    </div>
                    <div class="item">
                        <p><strong>Highly engaged / Not engaged</strong></p>
                        <p>1. I feel safe to ask questions and I atn listened to</p>
                        <p>2. I am clear about the lesson's obiectives.</p>
                        <p>3. The teacher is approachable and helpful</p>
                        <p>4. The activities are varied</p>
                    </div>
                </div>
                <div class="coordinate-axis">
                    <div class="direction top">Challenging</div>
                    <div class="direction bottom">Not challenging enough</div>
                    <div class="direction left">Not engaged</div>
                    <div class="direction right">Highly engaged</div>
                    <div class="center"></div>
                    <div class="draw-wrap" v-on:click="getCoor($event)"></div>
                    <div class="x-axis"></div>
                    <div class="y-axis"></div>
                </div>
                <div class="text" style="margin-top:20px;text-align: center;">
                    <p class="hide">中心点对于整个容器的位置：<span class="coor-0">X:0,Y:0</span></p>
                    <p class="hide">中心点对于屏幕的位置：<span class="coor-1">X:0,Y:0</span></p>
                    <p class="hide">鼠标指针在：<span class="sb-coor">X:0,Y:0</span></p>
                </div>
                <div style="text-align: center;margin-top: 51px;">
                    <span class="lg-btn lg-big lg-submit" v-on:click="OnConfirm">提交</span>
                </div>
            </div>
        </div>

    </div>

    <script>
        var app = Vue.createApp({
            data() {
                return {
                    popupshow: false,
                    GradeList: ["FP", "DP1", "DP2"],
                    StudentList: [],
                    form:{
                        Grade:"",
                        StudentName:""
                    },
                    dataSource:[],
                    currData: {},
                    isDone:false
                }
            },
            methods: {
                OnGradeChange:function(){
                    this.StudentList = [];
                    this.dataSource=[];
                    if(this.form.Grade){
                        lg.request({
                            url:"/home/GetStudent",
                            method:"post",
                            data:{Grade:this.form.Grade},
                            success:res=>{
                                if(res.code==0&&res.data){
                                    this.StudentList=res.data;
                                }
                            }
                        })
                    }
                },
                OnStudentChange:function(){
                    this.dataSource=[];
                    if(this.form.Grade&&this.form.StudentName){
                        lg.request({
                            url: "/home/GetCourse",
                            method: "post",
                            data: this.form,
                            success: res => {
                                if (res.code == 0 && res.data) {
                                    this.dataSource = res.data;
                                    this.isDone= res.data.filter(p=>p.XValue==null||p.XValue=='').length==0
                                }
                            }
                        })
                    }
                },
                OnEvaluate:function(index){
                    this.currData={index:index,XValue:0,YValue:0};
                    this.popupshow = true;
                },
                getCoor: function (e) {
                    var x_axis = e.offsetX - 150
                    var y_axis = -(e.offsetY - 150)
                    this.currData.XValue = x_axis
                    this.currData.YValue = y_axis
                    $(".center").css({
                        "margin-left": x_axis,
                        "margin-top": -y_axis,
                        "transform": "scale(2)"
                    })
                },
                OnConfirm: function () {
                    var that=this;
                    if (this.currData.XValue) {
                        layer.confirm("请仔细确认结果，提交后无法修改！", {
                            title: "友情提示",
                            icon: 0,
                            btn: ['确认', '取消'],
                            btn1: function (index) {
                                that.dataSource[that.currData.index].YValue = that.currData.YValue;
                                that.dataSource[that.currData.index].XValue=that.currData.XValue;
                                that.popupshow = false;
                                layer.msg("提交成功", {
                                    time: 1000
                                });
                            },
                            function(index) {
                                layer.closeAll()
                            }
                        })
                    } else {
                        layer.msg("还未评分！")
                        
                    }
                },
                OnClosePanel:function(){
                    this.popupshow=false;
                },
                Submit: function () {
                    var that=this;
                    var b = this.dataSource.filter(p => !p.XValue).length>0
                    if (b) {
                        layer.msg("还有未未处理的项！请全部处理完成再提交！", {
                            time: 1000,icon:2,anim:6
                        })
                        return;
                    }
                    lg.request({
                        url: "/Home/Evaluvate",
                        method:"post",
                        data:{data:JSON.stringify(this.dataSource)},
                        success:res=>{
                            if(res.code==0){
                                layer.msg("提交成功!",{icon:1},function(){
                                    that.isDone=true;
                                })
                            }else{
                                layer.msg(res.msg,{icon:2})
                            }
                        }
                    })
                    
                },
                OnSelect: function () {
                    this.$refs.fileSelector.value = '';
                    this.$refs.fileSelector.click();
                },
                OnSelected: function () {
                    var files = this.$refs.fileSelector.files;
                    if (files.length == 0) {
                        return false;
                    }
                    var fd = new FormData();
                    fd.append("file", files[0]);
                    lg.postFile({
                        url: "/home/ImportData",
                        data: fd,
                        success: res => {
                            if(res.code==0){
                                layer.msg(res.msg,{icon:1})
                            }else{
                                layer.msg(res.msg,{icon:2})
                            }
                        }
                    })
                }

            }
        });
        diyForm.componentForms(app);
        app.mount(".wrap")
    </script>


</body>
</html>
